<template>
  <div class="account-container">
    <main>
      <!-- 消费订单 -->
      <ul v-if="orderList.length" class="order-list">
        <li v-for="(item, index) in orderList" :key="index">
          <el-collapse
            v-model="collapseNames"
            accordion
            @change="getDetailsList"
          >
            <el-collapse-item :name="index">
              <template #title>
                <div class="norem-left">
                  <span class="number">{{ item.number }}</span>
                </div>
                <div class="norem-right">
                  <span>{{ item.status_format }}</span>
                </div>
              </template>
              <ul v-if="detailsData.image" class="content">
                <li>
                  <img
                    v-if="detailsData.image"
                    :src="detailsData.image"
                    alt=""
                  />
                  <p class="quantity">quantity: {{ detailsData.quantity }}</p>
                  <p class="price">
                    {{ detailsData.price_format }}
                  </p>
                  <p class="time">
                    {{ detailsData.created_at }}
                  </p>
                  <p
                    v-if="item.status_format === 'Unpaid'"
                    @click="toCancel(item.number)"
                    class="cancel"
                  >
                    <span>cancel</span>
                  </p>
                </li>
              </ul>
            </el-collapse-item>
          </el-collapse>
        </li>
      </ul>
      <div class="coin-list">
        <!-- 金币订单-->
        <ul class="game-list" v-if="gameOrederList.length">
          <li v-for="(item, index) in gameOrederList" :key="index">
            <span>{{ item.updated_at }}</span>
            <img src="@/assets/pay/goldCoin.png" alt="" />
            <span>-{{ item.gold_price }}</span>
          </li>
        </ul>
      </div>
    </main>
  </div>
</template>

<script setup>
import { orders, show, cancel } from "@/api/order";
import { categoriesOrders } from "@/api/user";
import { ref } from "vue";
import { ElMessage } from "element-plus";

const collapseNames = ref();

// 获取订单列表
const orderList = ref([]);
const gameOrederList = ref([]);
const getOrderList = () => {
  orders("stellar-game").then((res) => {
    orderList.value = res.data;
    // console.log(orderList.value);
  });
  categoriesOrders().then((res) => {
    gameOrederList.value = res.data;
    // console.log(gameOrederList.value);
  });
};
getOrderList();

// 获取订单详情
const detailsData = ref({});
const getDetailsList = (id) => {
  if (id !== "") {
    show(orderList.value[id].number).then((res) => {
      detailsData.value = res.data.order_products[0];
      // console.log(detailsData.value);
    });
  } else {
    detailsData.value = {};
  }
};

// 取消支付
const toCancel = (number) => {
  cancel(number).then((res) => {
    if (res.data) {
      ElMessage({
        message: "success",
        type: "success",
      });
      getOrderList();
    }
  });
};
</script>

<style lang="scss" scoped>
.account-container {
  padding: 10px;
  height: 100%;
  main {
    padding: 20px;
    width: 100%;
    min-height: 100%;
    display: flex;
    justify-content: space-between;
    border-radius: 4px;
    background: #263044;
    .order-list {
      width: 400px;
      ::v-deep .el-collapse {
        border: none;
        .el-collapse-item {
          .el-collapse-item__header {
            border: none;
            color: #d1cdcd;
            background: #263044;
            .norem-left {
              margin-right: 40px;
              .number {
                font-size: 12px;
                white-space: nowrap;
              }
            }
            .norem-right {
              font-size: 12px;
            }
          }
          .el-collapse-item__wrap {
            margin: 2px 0;
            border-bottom: 1px solid #767675;
            .el-collapse-item__content {
              background: #263044;
              .content {
                li {
                  font-size: 16px;
                  img {
                    padding: 10px;
                    margin-bottom: 6px;
                    width: 70px;
                    height: 70px;
                    border: 1px solid #3f3f3e;
                  }
                  .quantity {
                    margin-bottom: 6px;
                    color: #999;
                  }
                  .price {
                    margin-bottom: 6px;
                    color: #999;
                  }
                  .time {
                    margin-bottom: 6px;
                    color: #999;
                  }
                  .cancel {
                    color: #999;
                    cursor: pointer;
                    &:hover {
                      color: #fff;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    .coin-list {
      padding: 20px;
      width: 300px;
      background: #263044;
      .game-list {
        li {
          margin-bottom: 20px;
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #999;
          img {
            margin: 0 6px 0 20px;
            width: 16px;
            height: 16px;
          }
        }
      }
    }
  }
}
</style>
